<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body {
            background: #9CC;
            perspective: 1000px;
        }
        
        .box {
            height: 200px;
            width: 200px;
            position: relative;
            margin: 200px auto;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transform: rotateX(20deg) rotateY(20deg);
            animation: one 5s linear infinite;
            -webkit-animation: one 5s linear infinite;
        }
        
        @keyframes one {
            from {
                transform: rotateX(-20deg) rotateY(0deg);
            }
            to {
                transform: rotateX(340deg) rotateY(360deg);
            }
        }
        
        @-webkit-keyframes one {
            from {
                transform: rotateX(-20deg) rotateY(0deg);
            }
            to {
                transform: rotateX(340deg) rotateY(360deg);
            }
        }
        
        .box div {
            width: 200px;
            height: 200px;
            background: black;
            opacity: 0.3;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid white;
            transition: all 2s;
        }
        
        .box span {
            width: 100px;
            height: 100px;
            background: orange;
            position: absolute;
            border: 1px solid white;
            top: 50%;
            left: 50%;
            opacity: 0.7;
            margin-top: -50px;
            margin-left: -50px;
            font-size: 50px;
            color: white;
            font-weight: bold;
            text-align: center;
            line-height: 100px;
        }
        
        .box div:nth-child(1) {
            transform: translateZ(100px);
        }
        
        .box div:nth-child(2) {
            transform: translateZ(-100px);
        }
        
        .box div:nth-child(3) {
            transform: rotateX(90deg) translateZ(100px);
        }
        
        .box div:nth-child(4) {
            transform: rotateX(90deg) translateZ(-100px);
        }
        
        .box div:nth-child(5) {
            transform: rotateY(90deg) translateZ(100px);
        }
        
        .box div:nth-child(6) {
            transform: rotateY(90deg) translateZ(-100px);
        }
        
        .box:hover div:nth-child(1) {
            transform: translateZ(200px);
        }
        
        .box:hover div:nth-child(2) {
            transform: translateZ(-200px);
        }
        
        .box:hover div:nth-child(3) {
            transform: rotateX(90deg) translateZ(200px);
        }
        
        .box:hover div:nth-child(4) {
            transform: rotateX(90deg) translateZ(-200px);
        }
        
        .box:hover div:nth-child(5) {
            transform: rotateY(90deg) translateZ(200px);
        }
        
        .box:hover div:nth-child(6) {
            transform: rotateY(90deg) translateZ(-200px);
        }
        
        .box span:nth-child(7) {
            transform: translateZ(50px);
        }
        
        .box span:nth-child(8) {
            transform: translateZ(-50px) rotateY(180deg);
        }
        
        .box span:nth-child(9) {
            transform: rotateX(90deg) translateZ(50px);
        }
        
        .box span:nth-child(10) {
            transform: rotateX(90deg) translateZ(-50px);
        }
        
        .box span:nth-child(11) {
            transform: rotateY(90deg) translateZ(50px);
        }
        
        .box span:nth-child(12) {
            transform: rotateY(270deg) translateZ(50px);
        }
        
        .input-box {
            margin: auto;
            width: 200px;
            /* background-color: black; */
            text-align: center;
        }
        
        input {
            width: 50px;
            height: 50px;
            background-color: greenyellow;
            border: none;
            font-size: 16px;
            color: black;
            border-radius: 8px;
        }
        
        input:nth-child(2) {
            margin-left: 20px;
        }
    </style>

</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <span>1</span>
        <span>6</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>2</span>
    </div>
    <div class="input-box">
        <input type="button" value="播放" id="play">
        <input type="button" value="暂停" id="paused">
    </div>
    <script>
        // window.onload保证dom元素创建完毕之后添加事件监听
        window.onload = function() {
            var div = document.querySelector(".box");

            // 播放
            document.querySelector("#play").onclick = function() {
                    div.style.animationPlayState = "running";
                }
                // 暂停
            document.querySelector("#paused").onclick = function() {
                div.style.animationPlayState = "paused";
            }
        }
    </script>

</body>

</html>